
import 'package:example/demo/page_ball.dart';
import 'package:flutter/material.dart';
import 'package:flutter_base_app/base/base_page.dart';
import 'package:flutter_base_app/base/base_page_view_model.dart';

class PageOne extends StatefulWidget {
  const PageOne({super.key});

  @override
  State<PageOne> createState() => _PageOneState();
}

class _PageOneState extends BasePageState<BasePageViewModel, PageOne> with TickerProviderStateMixin {

  ValueNotifier<String> text = ValueNotifier("aaa");

  TabController? tabController;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget buildContent(BuildContext context) {

    List<Widget> tabs = [
      Container(
        width: 400,
      ),
      _buildItem("123ddd"),
      _buildItem("123ddd2"),
      _buildItem("123ddd3"),
      _buildItem("123ddd4"),
      _buildItem("123ddd5tttttt"),
      _buildItem("123ddd6ggggggggggg"),
      _buildItem("123ddd7"),
      _buildItem("123ddd8hhhhhhhhhhhhh"),
      _buildItem("123ddd9"),
      _buildItem("123dddq0"),
      Container(
        width: 400,
      ),
    ];
    tabController = TabController(length: tabs.length, vsync: this);
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.green,
      child: Stack(
        children: [
          Positioned(
            top: 100,
            left: 10,
            right: 10,
            child: Row(
            children: [
              Expanded(child: Container(color: Colors.amber, height: 10,)),
              ValueListenableBuilder(valueListenable: text, builder: (context, value, child){
                return Text(value);
              }),
              Expanded(child: Container(color: Colors.amber, height: 10,)),
            ],
          )),
          Positioned(
              top: 200,
              child: GestureDetector(
            onTap: (){
              text.value = "${text.value}${text.value}";
            },
            child: Container(
              color: Colors.red,
              child: Text("click"),
            ),
          )),

          Positioned(
            left: 50,
              right: 50,
              top: 250,
              child: Container(
                child: TabBar(
                  physics: NeverScrollableScrollPhysics(),
                  tabAlignment: TabAlignment.start,
                  padding: EdgeInsets.zero,
                  labelPadding: EdgeInsets.zero,
                  isScrollable: true,
                  controller: tabController,
                  tabs: tabs
                ),
              )),

          Positioned(
              left: 50,
              right: 50,
              top: 250,
              child: Center(
                child: Container(
                  width: 2,height: 20,
                  color: Colors.red,
                ),
              )),

          Positioned(
              top: 300,
              child: GestureDetector(
                onTap: (){
                  // text.value = "${text.value}${text.value}";
                  tabController?.animateTo(tabController!.index! - 1);
                },
                child: Container(
                  color: Colors.red,
                  child: Text("last"),
                ),
              )),

          Positioned(
              top: 350,
              child: GestureDetector(
                onTap: (){
                  // text.value = "${text.value}${text.value}";

                  tabController?.animateTo(tabController!.index! + 1);
                },
                child: Container(
                  color: Colors.red,
                  child: Text("next"),
                ),
              )),
        ],
      ),
    );
  }

  @override
  BasePageViewModel createViewModel() {
    return BasePageViewModel();
  }

  Widget _buildItem(String text){
    return Container(
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.all(Radius.circular(30)),
        border: Border.all(color: Colors.black)
      ),
      padding: EdgeInsets.only(left: 10, right: 10),
      child: Text(text,),
    );
  }

}
